<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upright Chart</title>
    <script type="text/javascript" src="../lib/d3v4.js"></script>


</head>
<body>
<style>
    .MyRect {
        fill: steelblue;
    }

    .MyText {
        fill: white;
        text-anchor: middle; /* 我的估计。。意思是ｘ和ｙ坐标定位在ｔｅｘｔ框中间*/
        font-size: 12px;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }
</style>

<script>


    var width = 500, height = 500;

    var dataset = [52, 54, 76, 54, 123, 87, 56, 43, 91, 32, 54,65,123,500,91, 32, 54,65,123,500];

    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("transform", "translate(0,0)");

    var padding = {left: 30, right: 30, top: 20, bottom: 20};

    var xScale = d3.scaleLinear()
        .domain([0,d3.max(dataset)])
        .range([0,width-padding.left-padding.right]);

    var yScale = d3.scaleBand()
        .domain(d3.range(dataset.length))
        .rangeRound([height-padding.top-padding.bottom,0])
        .paddingInner(0.05);

    console.log("xxx");
    var xAxis = d3.axisBottom().scale(xScale);
    var yAxis = d3.axisLeft().scale(yScale);

//    svg.append("g")
//        .attr("class","axis")
//        .attr("transform","translate("+padding.left+","+height-padding.bottom+")")
//        .call(xAxis);
//    svg.append("g")
//        .attr("class","axis")
//        .attr("transform","translate("+padding.left+","+padding.top+")")
//        .call(yAxis);
    console.log(padding.left);
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
        .call(xAxis);

    //添加y轴
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
        .call(yAxis);

    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("x",function(d){
            return 1;
        })
        .attr("transform","translate("+padding.left+","+padding.top+")")
        .attr("width",function(d){
            return xScale(d);
        })
        .attr("height",yScale.bandwidth())
        .attr("y",function(d,i){
            return yScale(i);
        });

    var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate("+padding.left+","+padding.top+")")
        .attr("x",function(d,i){
//            console.log(xScale(d));
            return xScale(d);
        })
        .attr("y",function(d,i){
            return yScale(i);
        })
        .attr("dx",-15)
        .attr("dy",yScale.bandwidth()/2+yScale.step()*0.1)
        .text(function(d){
            return d;
        })





</script>
</body>
</html>